import React from 'react';
import {
  Routes,
  Route,
  Link,
  Navigate,
  useNavigate
} from 'react-router-dom'
import Home from './pages/Home';
import About from './pages/About'
import Login from './pages/Login';
import NotFound from "./pages/NotFound";
import HomeRecommend from "./pages/HomeRecommend";
import HomeRanking from "./pages/HomeRanking";
import Category from "./pages/Category";
import Order from "./pages/Order";
import HomeSongs from "./pages/HomeSongs";
import Detail from "./pages/Detail";
import User from "./pages/User";

function App(props) {

  //Hook只能放在函数体的顶层，不能放在内部函数中
  //navigate(to, options[replace, state])
  const navigate = useNavigate();

  //使用函数式组件
  function navigateTo(path) {
    navigate(path);
  }

  return (
    <div className='app'>
      <div className='header'>
        <span>header</span>
        <div className='nav'>
          <Link to='/home'>首页</Link>
          <Link to='/about'>关于</Link>
          <Link to='/login'>登录</Link>
          <button onClick={ e => navigateTo('/category') }>分类</button>
          <span onClick={ e => navigateTo('/order') }>订单</span>
          <Link to='/detail'>详情</Link>
          <Link to='/user?name=lyq&age=18'>用户</Link>
        </div>
      </div>
      <hr />
      <div className='content'>
        <Routes>
          <Route path='/' element={<Navigate to='/home'/>} />
          <Route path='/home' element={<Home/>}>
            <Route path='/home' element={<Navigate to='/home/recommend'/>}/>
            <Route path='/home/recommend' element={<HomeRecommend/>}/>
            <Route path='/home/ranking' element={<HomeRanking/>}/>
            <Route path='/home/songs' element={<HomeSongs/>}/>
          </Route>
          <Route path='/about' element={<About/>}/>
          <Route path='/category' element={<Category/>}/>
          <Route path='/order' element={<Order/>}/>
          <Route path='/login' element={<Login/>}/>
          {/* 使用 params 传参*/}
          <Route path='/detail/:id' element={<Detail/>}/>
          {/* 使用 query 传参 */}
          <Route path='/user' element={<User/>}/>
          <Route path='*' element={<NotFound/>}/>
        </Routes>
      </div>
      <hr />
      <div className='footer'>footer</div>
    </div>
   );
}
 
export default App;